@import "../../../colors";
@import "../../../frameless";

#navigation {
    h1 {
        font-size: 4.5rem;
    }

    @media only screen and (max-width: $mobile - 1) {
        h1 {
            font-size: 2.5rem;
        }
    }

    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
        h1 {
            font-size: 3rem;
        }
    }

    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
        h1 {
            font-size: 3.5rem;
        }
    }
}

#view {
    padding: 0;
}

.index.mod-2016,
.plan,
.expect,
.schedule {
    padding: 0 0 20px 0;

    p {
        margin: .25em 0 1em;

        &.intro {
            margin-bottom: 1em;
        }
    }

    ol,
    ul {
        margin: .25em 0 1em;

        li {
            margin: .75em 0;
        }
    }

    @media only screen and (max-width: $tablet - 1) {
        margin-top: 50px;
    }
}

.title-banner.mod-conference {
    margin-bottom: 0;
    background-color: $ui-blue;
    padding: 2rem 0;

    h1,
    h4,
    p {
        margin: 0 auto;
        padding: 5px 0;
        text-align: center;
        color: $type-white;
    }

    h1 {
        font-size: 4.5rem;
    }

    .title-banner-h1.mod-2017 {
        font-size: 4rem;
    }

    @media only screen and (max-width: $tablet - 1) {
        h1,
        .title-banner-h1.mod-2017 {
            font-size: 2.5rem;
        }
    }
}

.title-icon {
    position: absolute;
    width: 100%;
    text-align: center;

    img {
        width: 125px;
    }

    @media only screen and (max-width: $tablet - 1) {
        img {
            transform: translate(0, 5px);
            width: 85px;
        }
    }
}

section {
    padding: 64px 0;
}

@media only screen and (max-width: $mobile - 1) {
    #view {
        width: 100%;
        min-width: 100%;
    }
}
